<template>
  <el-form ref="form" :model="form" :rules="rules" size="small" label-width="130px">
    <el-form-item label="组件名称" prop="name">
      <el-input v-model="form.name" style="width: 320px;"/>
    </el-form-item>
    <el-form-item label="是否允许打卡">
      <el-switch
        v-model="form.is_punch"
        active-text="是"
        inactive-text="否"
        :active-value="1"
        :inactive-value="0"
      >
      </el-switch>
    </el-form-item>
    <template v-if="form.is_punch === 1">
      <el-form-item label="是否限制打卡时间">
        <el-switch
          v-model="form.time_limit"
          active-text="限制"
          inactive-text="不限"
          :active-value="1"
          :inactive-value="0">
        </el-switch>
      </el-form-item>
      <el-form-item v-if="form.time_limit === 1" label="打卡时间">
        <el-col :span="11">
          <el-time-select
            placeholder="起始时间"
            v-model="form.start"
            :picker-options="{
                    start: '05:00',
                    step: '00:30',
                    end: '20:00'
                  }">
          </el-time-select>
        </el-col>
        <el-col :span="11">
          <el-time-select
            placeholder="结束时间"
            v-model="form.end"
            :picker-options="{
                    start: '07:00',
                    step: '00:30',
                    end: '23:30',
                    minTime: form.start
                  }">
          </el-time-select>
        </el-col>
      </el-form-item>
      <el-form-item label="未打卡是否提示">
        <el-switch
          v-model="form.is_prompt"
          active-text="提示"
          inactive-text="不提示"
          :active-value="1"
          :inactive-value="0">
        </el-switch>
      </el-form-item>
      <el-form-item label="是否赠送积分">
        <el-switch
          v-model="form.is_give_score"
          active-text="赠送"
          inactive-text="不送"
          :active-value="1"
          :inactive-value="0">
        </el-switch>
      </el-form-item>
      <el-form-item label="打卡分值">
        <el-input-number v-model="form.score" :min="1" :max="100" label="打卡分值"></el-input-number>
      </el-form-item>
    </template>
  </el-form>
</template>

<script>
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
    name: 'Form',
    components: { Treeselect },
    props: {
      roles: {
        type: Array,
        required: true,
      },
      isAdd: {
        type: Boolean,
        required: true,
      },
      sup_this: {
        type: Object,
        default: null,
      },
      formData:{
        type: Object,
        required: true
      }
    },
    data() {
      return {
        dialog: false,
        loading: false,
        form: this.formData,
        rules: {
          name: [
            { required: true, message: '请输入tab名称', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
          ]
        },
        formDataIndex:0,
      }
    },
    created() {},
    watch:{
      formData:{
        handler:function(newVal){
          this.form = newVal
        },
        deep: true
      }
    },
    methods: {

    },
  }
</script>

<style scoped>

</style>
